<template>
	<view style="width: 100%; height: auto;background-color: #F3F4F5;">
		<view class="title">
			<input maxlength="50" type="text" v-model="article.title" placeholder="请输入文章标题" />
		</view>
		<view class="cover flex_r_center">
			<image v-show="article.cover!=''" style="width: 100%;height: 100%;" :src="article.cover||'/pagesA/static/微信图片_20201124091755.png'" mode=""></image>
			<image v-show="article.cover===''" class="errImg" src="/pagesA/static/homeImg/icon/Release_pic@2x.png" @click="selCover"
			 mode=""></image>
			<span v-show="article.cover===''">插入封面(必选)</span>
		</view>
		<view class="text">
			<view class="tipoc">
				文章正文
			</view>
			<view class="neirong">
				<view class="" v-for="(item,index) in article.text" :key="index">
					<!-- 文字 -->
					<view class="wenzi" v-if="isShowItem[index]===1">
						{{item}}
					</view>
					<!-- 图片 -->
					<view class="tupian" v-if="isShowItem[index]===2">
						<image class="ttr" :src="item||'/pagesA/static/微信图片_20201124091755.png'" mode=""></image>
						<image class="shanchu" src="/pagesA/static/homeImg/icon/shanchu.png" @click="delITem(index)"></image>
					</view>
					<!-- 视频 -->
					<view class="shipin flex_r_start" v-if="isShowItem[index]===3">
						<image style="width: 32rpx;height: 32rpx;" :src="item||'/pagesA/static/微信图片_20201124091755.png'" mode=""></image>
						<span>已插入视频，点击修改</span>
						<image style="width: 36rpx;height: 36rpx;" src="/pagesA/static/homeImg/icon/shanchu.png" mode=""></image>
					</view>
				</view>

			</view>
			<view class="content flex_r_between">
				<view @click="selImage">
					<view>
						<image style="width: 68rpx;height:56rpx;" src="/pagesA/static/homeImg/icon/Release_pic@2x.png" mode=""></image>
					</view>
					<view>添加图片</view>
				</view>
				<view @click="$linkTo('./Add_text')">
					<view>
						<image style="width: 64rpx; height: 56rpx;" src="/pagesA/static/homeImg/icon/Release_Release_video@2x.png" mode=""></image>
					</view>
					<view>添加文字</view>
				</view>
				<view @click="pushvideo">
					<view>
						<image style="width: 60rpx; height: 60rpx;" src="/pagesA/static/homeImg/icon/Release_video@2x.png" mode=""></image>
					</view>
					<view>添加视频</view>
				</view>
			</view>
		</view>
		<view class="text">
			<view class="tipoc">
				推荐商品
			</view>
			<view class="content content1 flex_r_center" @click="$linkTo('./Add_goods')">
				<image style="width: 28rpx;height: 28rpx;margin-right: 12rpx;" src="/pagesA/static/homeImg/icon/Release_goods@2x.png"
				 mode=""></image>添加商品1/5
			</view>
		</view>
		<view class="text">
			<view class="tipoc">
				推荐文章
			</view>
			<view class="content content1 flex_r_center" @click="$linkTo('./Add_article')">
				<image style="width: 28rpx;height: 28rpx; margin-right: 12rpx;" src="/pagesA/static/homeImg/icon/Release_article@2x.png"
				 mode=""></image>添加文章1/5
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="fgh">
			<view class="tijiao" :class="{bgc_DB1B22:commentValueLen!==0?true:false}">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				article: {
					title: '',
					cover: '',
					text: [],
				},
				isShowItem:[],
			};
		},
		onLoad(option) {
			console.log(option)
			if (option.value != undefined) {
				this.article.text.push(option.value)
			}
			console.log(this.article)
		},
		onShow() {
			this.regOPq()
		},
		methods: {
			regOPq(){
				var reg=new RegExp(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
				for (let i = 0; i < this.article.text.length; i++) {
					if(reg.test(this.article.text[i])){
						this.isShowItem[i]=2
					}else{
						this.isShowItem[i]=1
					}
					
				}
				console.log(this.isShowItem)
			},
			delITem(index){
				this.article.text.splice(index,1)
				this.regOPq()
			},
			selCover() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res.tempFilePaths[0]);
						this.article.cover = res.tempFilePaths[0]
					}
				});
			},
			selImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res.tempFilePaths[0])
						this.article.text.push(res.tempFilePaths[0])
						this.regOPq()
						console.log(this.article)
					}
				});
			},
			pushvideo() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res.tempFilePaths[0])
						this.article.text.push(res.tempFilePaths[0])
						this.regOPq()
						console.log(this.article)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/static/css/flex.css");

	.fgh {
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 100rpx;
		background: #FFFFFF;
		border-top: 1px solid #DDDDDD;

		.tijiao {
			width: 690rpx;
			height: 70rpx;
			background: #FEBFC1;
			border-radius: 36rpx;
			margin: 14rpx auto;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 70rpx;
			text-align: center;

		}

		.bgc_DB1B22 {
			background-color: #DB1B22;
		}

	}

	.text {
		.neirong {
			width: 100%;
			height: auto;

			.wenzi {
				width: 100%;
				height: auto;
				background: #FFFFFF;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;
				padding: 26rpx;
				box-sizing: border-box;
			}

			.tupian {
				width: 375px;
				height: auto;
				position: relative;

				.ttr {
					width: 100%;
				}

				.shanchu {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
			}

			.shipin {
				border-top: 1px solid #DDDDDD;
				border-bottom: 1px solid #DDDDDD;
				padding: 0 28rpx 0 36rpx;
				width: 100%;
				height: 140rpx;
				background: #FFFFFF;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #111111;

				span {
					margin-left: 20rpx;
					margin-right: 310rpx;
				}

			}
		}

		.tipoc {
			height: 60rpx;
			width: 100%;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #111111;
			line-height: 60rpx;
			text-align: center;
			background-color: #F3F4F5;
		}

		.content {
			padding: 0 98rpx;
			box-sizing: border-box;
			width: 100%;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 0px 0px #DDDDDD;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #9DA5A8;
			text-align: center;
		}

		.content1 {
			height: 100rpx;
		}
	}

	.title {
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		border-top: 1px solid #DDDDDD;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #9DA5A8;
		line-height: 90rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		input {
			height: 100%;
			color: #111111;
			font-weight: 600;
		}
	}

	.cover {
		width: 100%;
		height: 500rpx;
		background: #FFFFFF;
		border-top: 1px solid #DDDDDD;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #9DA5A8;
		text-align: center;
		line-height: 300rpx;
		position: relative;

		.errImg {
			width: 68rpx;
			height: 56rpx;
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
